<template>
	<div class="zhushou">
		<div class="zhushou_cnt">
			<ul>
				<li>
					<router-link to = 'luxian' class="cnt_left">
						<div class="logs">
							<img src="../assets/img/Group 14.png">
						</div>
						<div class="texters">
							<span>高速通行费及油费估算</span>
							<span>解决司机资金预算后顾之忧</span>
						</div>
					</router-link>
					<div class="cnt_right">
						<p><img src="../assets/img/right@2x.png" ></p>
					</div>
				</li>
				<li>
					<div class="cnt_left">
						<div class="logs">
							<img src="../assets/img/xiaofei @2x.png" >
						</div>
						<div class="texters">
							<router-link to = 'etc_details'>
							<span>消费明细</span>
							<span>解决司机资金预算后顾之忧</span>
							</router-link>
						</div>
					</div>
					<div class="cnt_right">
						<p><img src="../assets/img/right@2x.png" ></p>
					</div>
				</li>
				<li>
					<div class="cnt_left">
						<div class="logs">
							<img src="../assets/img/roader@2x.png" >
						</div>
						<div class="texters">
							<span>实时路况</span>
							<span>解决司机资金预算后顾之忧</span>
						</div>
					</div>
					<div class="cnt_right">
						<p><img src="../assets/img/right@2x.png" ></p>
					</div>
				</li>
				<li>
					<router-link to = 'oil_card' class="cnt_left">
						<div class="logs">
							<img src="../assets/img/card@2x.png">
						</div>
						<div class="texters">
							<span>加油卡</span>
							<span>解决司机资金预算后顾之忧</span>
						</div>
					</router-link>
					<div class="cnt_right">
						<p><img src="../assets/img/right@2x.png" ></p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script type="text/javascript">
export default {
  beforeRouteEnter (to, from, next){
    next(vm => {
      vm.$parent.active = vm.$route.path.replace('/','');
      vm.$parent.title = '助手';
    })
    /*next(function(vm) {
    	console.log(vm);
      vm.$parent.active = vm.$route.path.replace('/','');
      vm.$parent.title = '助手';
    })*/
  }
}
</script>

<style scoped lang = 'less'>
@import '../assets/less/style.less';
.zhushou {
	header {
	   .px2rem(height,88);
	    background: #21d094;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    /* .border(1,solid,#000); */
	    p {
	      .font(30,#fff);
	    }
  	}
	.zhushou_cnt {
		.px2rem(height,124);
		/* .border(1,solid,#000); */
		ul {
			height: 100%;
			li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100%;
				/* .px2rem(height,124); */
				.border-bottom(1,solid,#dbdbdb);
				.cnt_left {
					display: flex;
					.logs {
						.padding-left(28);
						display: flex;
						align-items: center;
						img {
							.px2rem(height,68);
              				.px2rem(width,68);
						}
					}
					.texters {
						display: flex;
						flex-direction: column;
						justify-content: center;
						.padding-left(24);
						span:nth-child(1){
							display: block;
							.font(32,#333);
						}
						span:nth-child(2){
							display: block;
							.font(24,#b0b0b0);
							.padding-top(20);
						}
					}
				}
				.cnt_right {
					.padding-right(30);
					p {
						img {
							.px2rem(height,40);
              				.px2rem(width,40);
						}
					}
				}
			}
		}
	}
	nav {
    .px2rem(height,98);
    /* .border(1,solid,#000); */
    background: #fff;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    ul {
      height: 100%;
      display: flex;
      li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &:nth-child(1){
          a:nth-child(1){
            img {
              .px2rem(height,39);
              .px2rem(width,39);
            }
          }
        }
        &:nth-child(2){
          a:nth-child(1){
            img {
              .px2rem(height,36);
              .px2rem(width,36);
            }
          }
        }
        &:nth-child(3){
          a:nth-child(1){
            img {
              .px2rem(height,38);
              .px2rem(width,34);
            }
          }
        }
        a {
          display: block;
        }
      }
    }
  }
}
</style>




















